<template>
  <div class="exam">
    <div class="flex-horizon">
      <h2>第{{index+1}}题</h2>
      <div>倒计时: {{remainingTime}}</div>
    </div>
    <div class="tool-cards flex-horizon">
      <toolCard class="card-item" @clearWrong="onClearWrong" :count="userinfo.pickerrorcardnum" :type="0" :able="true"></toolCard>
      <toolCard class="card-item" :count="userinfo.addtimecardnum" :type="1" :able="true"></toolCard>
      <toolCard class="card-item" @skipQuestion="onSkipQuestion" :count="userinfo.passcardnum" :type="2" :able="true"></toolCard>
      <toolCard class="card-item" :count="userinfo.doublescorecardnum" :type="3" :able="true"></toolCard>
    </div>
    <div class="question-image">
      <img v-if="questions.length" :src="questions[index].imgsrc" alt="">
    </div>
    <div class="question-name" v-if="questions.length">
      {{questions[index].question}}
    </div>
    <form class="options">
      <div class="option flex-horizon" v-if="questions.length" v-for="(option,ind) in questions[index].options">
        <input type="radio" :name="'question-'+index" :disabled="option.disabled" :value="ind" :id="'option-'+index+'-'+ind" v-model="picked">
        <label :for="'option-'+index+'-'+ind" :class="{'disabled':option.disabled}">{{option.option}}</label>
      </div>
    </form>
    <div class="next-btn" @click="next">
      <img src="../assets/images/next-btn.png" alt="">
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import toolCard from '../components/tool-card.vue'
  import axios from 'axios'

  export default {
    name:'exam',
    data: () => {
      return {
        answers: {},
        index: 0,
        remainingTime:1,
        picked: ''
      }
    },
    computed: {
      questions(){
        return this.$store.state.questions
      },
      userinfo(){
        return this.$store.state.userinfo
      },
      testid(){
        return this.$store.state.test.id
      },
      isjoin(){
        return this.$store.state.test.isjoin
      }
    },
    methods: {
      next(e){
        if(this.picked==''&&this.picked.length==0){
          return
        }
        let key =this.questions[this.index].id
        let value = this.questions[this.index].options[this.picked].id
        this.answers[key]=value
        if(this.index >= this.questions.length-1){
          axios.get('/gxtest/postAnwer',{params:{id:this.testid,answer:this.answers}}).then(res=>{
            this.$router.push('result');
            //this.$store.commit('updateTest',{isjoin:1})
          })
          return;
        }
        this.index++
        this.picked = ''
      },
      loop(){
        let startTime = window.sessionStorage.startTime
        let now = new Date().getTime()
        let remainingTime = 1200000-(now-startTime)
        this.remainingTime = new Date(remainingTime).toLocaleTimeString().substr(-5)
        if(remainingTime <= 0&&this.$route.name=='exam'){
          this.gameOver();
          return;
        }
        window.requestAnimationFrame(this.loop)
      },
      gameOver(){
        this.$router.push('result')
      },
      onClearWrong(){
        let options = this.questions[this.index].options
        for(let i = 0,length=options.length;i<length;i++){
          if(options[i].isright==0&&!options[i].disabled){
            options[i].disabled = true
            break
          }
        }
      },
      onSkipQuestion(){
        let options = this.questions[this.index].options
        for(let i =0,length=options.length;i<length;i++){
          if(options[i].isright==1){
            this.picked=i
            break
          }
        }
        this.next()
      }
    },
    mounted (){
      if(!window.sessionStorage.startTime||this.isjoin>0){
        this.$router.push('result')
      }
      this.loop();

    },
    components: {toolCard}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .exam
    width: 100vw
    height: 100vh
    padding: 10px
    overflow-y scroll
    background-image: url("../assets/images/bg-image.jpg")
    background-repeat: no-repeat
    background-size: 100% auto
    background-position: center center
    .tool-cards
      margin: 10px 0
      .card-item
        flex: 0 0 20vw
    .question-image img
      width:100%
    .question-name
      margin: 10px 0
    .options
      margin:10px 0
      .option
        margin: 8px 0
        justify-content flex-start
        input
          flex 0 0 20px
          margin-right 6px
        .disabled
          color #666
    .next-btn img
      width: 100%
</style>
